<template>
    <div class="app-container">
        <!-- 回款单详情 -->
        <h5 class="titleInfo">回款单基础信息</h5>
        <!-- 查询模块 -->
        <el-form class="form" ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="医院名称">
                        <span class="spanToInput">{{detailsList.hospitalName | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="回款单号">
                        <span class="spanToInput">{{detailsList.repaymentSn | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="流水单号">
                        <span class="spanToInput">{{detailsList.orderSn | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用户姓名">
                        <span class="spanToInput">{{detailsList.userName | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用户手机号">
                        <span class="spanToInput">{{detailsList.userPhone | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="咨询师">
                        <span class="spanToInput">{{detailsList.consultantName | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="应回款金额">
                        <span class="spanToInput">{{detailsList.receivableAmount | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="已回款金额">
                        <span class="spanToInput">{{detailsList.receivedAmount | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="未回款金额">
                        <span class="spanToInput">{{detailsList.accruedAmount | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="回款状态">
                        <span class="spanToInput">{{detailsList.status | statusType}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间">
                        <span class="spanToInput">{{detailsList.createdAt | filterNull}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="divBar" />
        <!-- 主页列表 -->
        <h5 class="titleInfo">回款单回款信息</h5>
        <div class="listDiv" v-loading="tableLoading">
            <el-table
                :data="tableData"
                border
                style="width: 100"
                show-summary
                :summary-method="getSummaries"
            >
                <el-table-column fixed label="序号" type="index" width="50"></el-table-column>
                <el-table-column prop="orderSn" label="流水单号"></el-table-column>
                <el-table-column prop="repaymentSn" label="回款单号"></el-table-column>
                <el-table-column prop="paymentSn" label="付款单号"></el-table-column>
                <el-table-column prop="receivedAmount" label="回款金额"></el-table-column>
                <el-table-column prop="status" label="付款单状态">
                    <template slot-scope="scope">{{scope.row.status | payStatusType}}</template>
                </el-table-column>
                <el-table-column prop="createdAt" label="回款时间"></el-table-column>
            </el-table>
        </div>
        <div class="divBar" />
        <!-- 回款单逾期信息 -->
        <h5 class="titleInfo">回款单逾期信息</h5>
        <el-form class="form" ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否逾期">
                        <span class="spanToInput">{{detailsList.isExceed | isExceedType}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="逾期天数">
                        <span class="spanToInput">{{detailsList.exceedDays}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import receivableList from "@/api/receivableList";
import filters from "@/utils/filters";
export default {
    name: "receivableListInfo",
    data() {
        return {
            form: {},
            // table列表
            tableData: [],
            tableLoading: true,
            // 列表数据
            detailsList: {},
            // 回款状态列表
            reviewStatusList: [
                { name: "全部", value: "" },
                { name: "已回款", value: "1" },
                { name: "未回款", value: "2" },
                { name: "部分回款", value: "3" },
                { name: "已抵扣", value: "4" },
                { name: "未抵扣", value: "5" },
                { name: "抵扣中", value: "6" },
                { name: "已付款", value: "7" }
            ],
            // 是否逾期
            overdueList: [
                { name: "全部", value: "" },
                { name: "是", value: "0" },
                { name: "否", value: "1" }
            ],
            totalsArr: []
        };
    },
    mounted() {
        this.getDetails(this.$route.query);
        // console.log(this.sum([1, 2, 3, 4]));
    },
    filters: {
        // 状态过滤
        statusType(e) {
            return filters.statusType(String(e))
        },
        // 是否逾期
        isExceedType(e) {
            switch (e) {
                case "0":
                    return "未逾期";
                case "1":
                    return "已逾期";
                default:
                    return "暂无";
            }
        },
        // 付款单状态
        payStatusType(e) {
            switch (e) {
                case "0":
                    return "待审核";
                case "1":
                    return "审核通过";
                case "2":
                    return "已付款";
                default:
                    return "暂无";
            }
        },
        // 暂无
        filterNull(e){
            if(!e){
                return "暂无";
            }else{
                return e
            }
        }
    },
    methods: {
        // 获取详情列表
        getDetails(e) {
            receivableList
                .getDetails(e)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.tableData = resData.list;
                        resData.list.forEach(e => {
                            this.totalsArr.push(Number(e.receivedAmount));
                        });
                        // console.log(this.totalsArr);
                        this.detailsList = resData;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        // 累加
        sum(arr) {
            return eval(arr.join("+"));
        },
        // table表数据合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            let amounts;
            if (this.totalsArr.length > 0) {
                amounts = Number(this.sum(this.totalsArr)).toFixed(2);
            }
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "总计";
                    return;
                }
                switch (column.property) {
                    case "receivedAmount":
                        // sums[index] = amounts > 0 ? amounts : "0.00";
                        sums[index] = amounts;
                        break;
                    default:
                        break;
                }
            });
            return sums;
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
.app-container {
    padding: 0.1px !important;
}
.form {
    margin-left: 20px;
}
.listDiv {
    padding-bottom: 20px;
    margin: 0 20px;
    box-sizing: border-box;
}
</style>